import React, {Component} from 'react';
import {Breadcrumb, message, Input, Tag} from "antd";
import {NavLink} from "react-router-dom";
import {PlusOutlined} from '@ant-design/icons';

class Lable extends Component {
    state = {
        lable: [],
        changelable: {},
        inputValue: ""
    }

    //分类标签相关
    handleClose(tag, id) {
        let lable = this.state.lable;
        lable[id].lable.splice(lable[id].lable.indexOf(tag), 1);
        this.setState({lable: lable})
        this.change(id);
    }

    showInput = (id) => {
        let lable = this.state.lable;
        lable[id].inputshow = 1;
        this.setState({lable: lable});
    }
    handleInputChange = (e) => {
        this.setState({inputValue: e.target.value});
    }
    handleInputConfirm = (id) => {
        let inputValue = this.state.inputValue;
        let lable = this.state.lable;
        if (inputValue) {
            if (!lable[id].lable){
                lable[id].lable = [];
                lable[id].lable.push(inputValue);
            }else lable[id].lable.push(inputValue);
            this.setState({lable: lable});
            this.change(id);
        }
        lable[id].inputshow = 0;
        this.setState({lable: lable, inputValue: ""});
    }
    change = async (id) => {
        let changelable = this.state.changelable;
        changelable = JSON.stringify(this.state.lable[id]);
        changelable = JSON.parse(changelable); //通过JSON.stringify和JSON.parse完成深拷贝
        changelable.lable = JSON.stringify(changelable.lable);
        this.setState({changelable: changelable})
        let result = await this.$axios.post("/admin/changelable", changelable);
        if (result.data.state.type === "SUCCESS") {
            message.success("修改成功");
            this.lableList();
        }
    }
    lableList = async () => {
        let result = await this.$axios.post("/admin/lablelist", {lable_name: ""});
        if (result.data.state.type === "SUCCESS") {
            let lable = this.state.lable;
            lable = result.data.data;
            for (let i = 0; i < lable.length; i++) {
                lable[i].lable = JSON.parse(lable[i].lable);
            }
            this.setState({lable: lable});
        }
    }

    componentDidMount() {
        this.lableList();
    }

    render() {
        const {lable, inputValue} = this.state
        return (
            <div>
                <div className="top">
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <NavLink to='/'>首页</NavLink>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            网站管理
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            分类管理
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                {
                    lable.map((lable, index) => {
                        return (
                            <div className="main" key={index}>
                                <h3>{lable.lable_name}</h3>
                                {
                                    lable.lable?lable.lable.map((tag, index1) => {
                                        return (
                                            <Tag key={index1} color={"#87d068"}
                                                 onClose={() => this.handleClose(tag, index)}
                                                 closable
                                            >{tag}</Tag>
                                        )
                                    }):null
                                }
                                {lable.inputshow === 1 ? (
                                    <Input
                                        type="text"
                                        size="small"
                                        style={{width: 78}}
                                        value={inputValue}
                                        onChange={this.handleInputChange}
                                        onBlur={() => this.handleInputConfirm(index)}
                                        onPressEnter={() => this.handleInputConfirm(index)}
                                    />) : (
                                    <Tag onClick={()=>this.showInput(index)} className="site-tag-plus">
                                        <PlusOutlined/> New Tag
                                    </Tag>
                                )
                                }
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Lable;